<script setup lang="ts">
import BlockTitle from "@/components/BlockTitle/blockTitle.vue";
import CardItem from "@/components/CardItem/cardItem.vue";
import Taro from "@tarojs/taro";
import styles from "./home.less";

const barList = [
  {
    title: "公告信息",
    subTitle: "出让公告一手掌握",
    theme: "rgba(84, 236, 221, 0.931)",
  },
  {
    title: "快速找地",
    subTitle: "资源信息一手查询",
    theme: "rgba(98, 124, 240, 0.931)",
  },
];

const cardList = [1, 2, 3, 4, 5, 6];

const handleToMore = () => {
  Taro.navigateTo({
    url: "/pages/list/list",
  });
};
</script>

<template>
  <view :class="styles.homeContainer">
    <view :class="styles.top"></view>
    <view :class="styles.barList">
      <block v-for="item in barList" :key="item.title">
        <view
          :class="styles.barListItem"
          :style="{ backgroundColor: item.theme }"
        >
          <view :class="styles.listTitle">{{ item.title }}</view>
          <view :class="styles.listSubTitle">{{ item.subTitle }}</view>
        </view>
      </block>
    </view>
    <view :class="styles.homeList">
      <BlockTitle title="最新信息" @more="handleToMore" />
      <block v-for="item in cardList">
        <CardItem />
      </block>
      <!-- <block-title title="最新信息" bind:more="handleToMore"></block-title>
    <block wx:for="{{cardList}}">
      <card-item></card-item>
    </block> -->
    </view>
  </view>
</template>
